<!-- Copyright 2017 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<!doctype html>
<html>

<head>
  <title>Water Popup</title>

  <style>
    body {
      text-align: center;
      width: 500px;
      /* height: auto !important; */
      max-height: none !important;
      overflow: visible !important;
    }

    #hydrateImage {
      width: 100px;
      margin: 5px;
    }

    button {
      margin: 5px;
      outline: none;
    }

    button:hover {
      outline: #80deea dotted thick;
    }

    .box {
      /* background-color: #eee; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }

    .item {
      background-color: skyblue;
      height: 100px;
      width: 500px;
      transition: all .5s ease;
    }

    .draggable {
      background-color: #eee;
    }
  </style>
  <!--
      - JavaScript and HTML must be in separate files
     -->

</head>

<body>
  <img src="./stay_hydrated.png" id="hydrateImage" />
  <!-- An Alarm delay of less than the minimum 1 minute will fire
      in approximately 1 minute increments if released -->
  <button id="sampleMinute" value="1">Sample minute</button>
  <button id="min15" value="15">15 Minutes</button>
  <button id="min30" value="30">30 Minutes</button>
  <button id="cancelAlarm">Cancel Alarm</button>
  <button id="cancelTheme">关闭主题</button>
  <button id="cancelTheme">123</button>
  <div class="box">
    <div draggable="true" class="item">1</div>
    <div draggable="true" class="item">2</div>
    <div draggable="true" class="item">3</div>
    <div draggable="true" class="item">4</div>
    <div draggable="true" class="item">5</div>
  </div>
  <script src="popup.js"></script>
  <script src="draggable.js"></script>
</body>

</html>